<template>
	<div class="block">
	  
	  <!--日历-->
	  <el-calendar v-model="value">
		<template #date-cell="{data}">
			  <p class="tag-date">{{data.day.split("-")[2]}}</p>
			  <div class="tag-date" v-for="item in tagData">
				  <span class="tag-blue" v-if="item.date===data.day && item.type==='1'">·</span>
				  <span class="tag-yellow" v-if="item.date===data.day && item.type==='0'">·</span>
			  </div>
		</template>
	  </el-calendar>

    <!--时间线-->
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp">
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>

  </div>

</template>

<script>

export default {
  name: "CalendarLog",
  data() {
    return {
      //日历的日期
      value: new Date(),
      //时间线的顺序
      reverse: false,
	  //时间线的数据
      activities: [],
	  //日历的显示的点
	  tagData:[]
    }
  },
  created() {
    // 页面初始化的一些逻辑可以放在这里，例如发起网络请求获取数据等。
	  //查询时间线
	  this.getCalendarLog('1111',this.value);
	  //查询日历节点
	  this.getMonthLog('1111',this.value);
	  
  },
  watch: {
    // 监听message数据的变化
    value(newValue, oldValue) {
		this.getCalendarLog('1111',newValue);
		//判断月份是否改变,改变查询数据库
		let monrhNew = this.formatMonth(newValue);
		let monrhOld = this.formatMonth(oldValue);
		if(monrhNew!=monrhOld){
			//查询日历节点
			this.getMonthLog('1111',newValue);
		}
    }
	
  },
  methods: {
   //方法
   getCalendarLog:function(user_id,date){
	   //获取时间线的数据
	   let dateS = this.formatDate(date);
	   //调后端
   },
   getMonthLog:function(user_id,date){
	   //获取日历打卡记录的数据
   	   let dateS = this.formatMonth(date);
   	   //调后端
   },
   formatDate:function(date) {
	     //日期转换成字符
         let dateStr = date.getFullYear() + "-";
         dateStr += (date.getMonth() + 1).toString().padStart(2, '0') + "-";
         dateStr += date.getDate().toString().padStart(2, '0');
         return dateStr;
   },
   formatMonth:function(date) {
   	     //日期转换成字符
         let dateStr = date.getFullYear() + "-";
         dateStr += (date.getMonth() + 1).toString().padStart(2, '0');
         return dateStr;
   }
   
  }
  
}

</script>

<style lang="scss" scoped>
  .tag-blue {
  color: #0055ff;
  font-size: 30px;
  text-align: center;
  }
  .tag-yellow {
  color: #ffaa00;
  font-size: 30px;
  text-align: center;
  }
  .tag-date {
    text-align: center;
  }
</style>

<!--Timeline Attributes-->
<!--参数	说明	类型	可选值	默认值-->
<!--reverse	指定节点排序方向，默认为正序	boolean	—	false-->
<!--¶Timeline-item Attributes-->
<!--参数	说明	类型	可选值	默认值-->
<!--timestamp	时间戳	string	-	—-->
<!--hide-timestamp	是否隐藏时间戳	boolean	—	false-->
<!--placement	时间戳位置	string	top / bottom	bottom-->
<!--type	节点类型	string	primary / success / warning / danger / info	- -->
<!--color	节点颜色	string	hsl / hsv / hex / rgb	- -->
<!--size	节点尺寸	string	normal / large	normal-->
<!--icon	节点图标	string	—	- -->


<!-- this.activities=[{
        content: '上班',
        timestamp: '2024-10-17 08:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '上班',
        timestamp: '2024-10-17 08:50',
        color: '#0bbd87'
      }, {
        content: '下班',
        timestamp: '2024-10-17 17:46',
        size: 'large'
      }, {
        content: '下班',
        timestamp: '2024-10-17 18:46'
      }] -->
	  
	 <!-- tagData:[
	  		  {date:"2024-10-10",type:1},
	  		  {date:"2024-10-11",type:1},
	  		  {date:"2024-10-12",type:1},
	  		  {date:"2024-10-13",type:1},
	  		  {date:"2024-10-14",type:1},
	  		  {date:"2024-10-15",type:1},
	  		  {date:"2024-10-20",type:0},
	  		  {date:"2024-10-21",type:0},
	  		  {date:"2024-10-22",type:0},
	  		  {date:"2024-10-23",type:0},
	  		  {date:"2024-10-24",type:0},
	  		  {date:"2024-10-25",type:0}
	  ] -->